<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>商品详情</title>
	<link rel="icon" href="/favicon.ico" />
	<link rel="stylesheet" href="/css/reset.css" />
	<link rel="stylesheet" href="/lib/icon-font/iconfont.css" />
	<link rel="stylesheet" href="/css/details.css" />
	<link rel="stylesheet" href="/css/header.css" />
	<link rel="stylesheet" href="/css/footer.css" />
</head>

<body>

	<!-- 顶部黑色导航栏样式 -->
	<header>
	</header>

	<!-- 灰色导航栏样式 -->
	<!-- 滚动时添加样式 class="scrollnav" -->
	<nav>
		
	</nav>
	<script type="text/html" id="detailsTitle">
		<ul>
			<h1>{{name}}</h1>
			<li><a>概述</a></li>
			<li><a>设计</a></li>
			<li><a>功能</a></li>
			<li><a>相机</a></li>
			<li><a>操作系统</a></li>
			<li><a>技术规格</a></li>
		</ul>
		<span>优先购买码</span>
	</script>

	<!-- 手机商品部分样式 -->
	<section>
		<div class="container" id="detailsContent">

		</div>
		<script type="text/html" id="detailsTemplate">
				<div class="prodview">
					{{each sku_info item}}
					<img class="show" src="{{item.ali_image}}"/>
					{{/each}}
				</div>
				<div class="prodinfo">

					<!-- 商品的名称 -->
					<div class="prodtittle">
						<h2>{{name}}</h2>
						<p>{{intru}}</p>
					</div>

					<!-- 商品活动信息 -->
					<div class="prodsale">
						<h4>促销活动</h4>
						<div>
							<article><span>新人礼</span> &nbsp;下载App领取大礼包，首单优惠购最低只要 &yen; 9.9 <strong>查看详情</strong></article>
							<article><span>买赠</span> &nbsp;购机送TWS（抖音文创限量款），赠品有限，送完为止。</article>
							<article><em>免息</em> &nbsp;花呗 6期免息 &nbsp;<strong>每月低至 &yen; 799.83 元</strong></article>
						</div>
					</div>

					<!-- 商品的颜色选择 -->
					<div class="prodcolor">
						<h4>颜色选择</h4>
						<ul>
							<!-- <li>浅黑色</li>
							<li class="prodselected">松绿色</li>
							<li>纯白色光阴特别版</li> -->
							{{each colorArr item}}
							<li>{{item.item_value}}</li>
							{{/each}}
						</ul>
					</div>

					<!-- 商品的规格样式选择 -->
					{{if sizeArr.length}}
					<div class="prodinter">
						<h4>容量选择</h4>
						<ul>
							<!-- <li class="unselected">8G + 128GB</li>
							<li class="prodselected">8G + 256GB</li>
							<li>12G + 256GB</li>
							<li class="unselected">16G + 512G</li> -->
							{{each sizeArr item}}
							<li>{{item.item_value}}</li>
							{{/each}}
						</ul>
					</div>
					{{/if}}

					<!-- 服务说明 -->
					<div class="prodserver">
						<h5>服务说明</h5>
						<p>*&nbsp;满88元包邮</p>
					</div>

					<!-- 保修服务 -->
					<div class="prodfix">
						<h5>保修服务</h5>
						<div>

							<!-- 第一个保修的选择框 -->
							<!-- 选中状态下加上class="serverchecked" -->
							<!-- <div class="options">
								<div class="leftoption">
									<b>坚果R2以外碎屏保修服务</b>
									<p>"屏幕意外摔碎，可以免费更换 ? "</p>
								</div>
								<div class="rightoption">
									<em>249 元/ 1 年</em>
									<p>折算后仅需 0.69 元/天</p>
								</div>
								<span class="iconfont icon-gouwu"></span>
							</div> -->

							<!-- 第二个保修的选择框 -->
							<!-- 选中状态下加上class="serverchecked" -->
							{{each accessory_goods item}}
							<div class="options">
								<div class="leftoption">
									<b>{{item.goods_name}}</b>
									<p>将额外多获得 1 年 保修服务</p>
								</div>
								<div class="rightoption">
									<em>{{item.price}}元/ 1 年</em>
									<p>折算后仅需 {{(item.price/365).toFixed(2)}} 元/天</p>
								</div>
								<span class="iconfont icon-gouwu"></span>
							</div>
							{{/each}}

							<!-- 保修服务的声明 -->
							<div class="servernote">
								<span>*&nbsp;保修服务</span>
								<p>在您购买“坚果手机意外碎屏保修服务”后的有效期内，在非蓄意破坏的前提下，
									由于意外坠落、意外挤压或意外碰撞导致手机屏幕碎裂的，可以免费更换一次原装屏幕组件。
									您可在手机初次联网激活时或收货起 （以在先时间为准）3 日内访问<strong>www.smartisan.com</strong>网站购买，或在本机
									设置 > 关于本机 > 保修服务 中购买服务。
									服务细则参见<strong>《坚果手机以外碎屏保修服务条款》</strong>。
									<br />
									<br />
									如您购买延长保修服务，在产品正常“三包”期结束后，将额外获得 1 年保修服务。
									服务细则参见<strong>《坚果手机延长保修服务条款》</strong></p>
							</div>
						</div>
					</div>
				</div>
		</script>
	</section>

	<!-- 商品展示的图片 -->
	<div class="prodimg">
		
	</div>
	<script type="text/html" id="imgTemplate">
		{{each goods_view item}}
			<img src="{{item.url}}" />
		{{/each}}
	</script>
	

	<!-- 相关推荐部分 -->
	<div class="suggestion">
		<div class="container">
			<h2>相关推荐</h2>
			<!-- 第一行推荐 -->
			<ul>
				<li>
					<a><img src="/img/sugimg1.jpg" /></a>
					<h3>Smartain 颈挂式耳机</h3>
					<p>"铁圈一体代表作"</p>
					<span>自营配件 满300减40</span>
					<b>
						<span class="black"></span>
					</b>
					<em>&yen;149.00<del>199.00</del></em>
					<strong>查看详情</strong>
					<i class="showtips">满减</i>
					<aside>大促</aside>
				</li>
				<li>
					<a><img src="/img/sugimg2.jpg" /></a>
					<h3>坚果弯头数据线</h3>
					<p>"3A"大电流</p>
					<span>自营配件 满300减40</span>
					<b>
					</b>
					<em>&yen;19.90<del>24.90</del></em>
					<strong>查看详情</strong>
					<i class="showtips">满减</i>
					<aside>大促</aside>
				</li>
				<li>
					<a><img src="/img/sugimg3.jpg" /></a>
					<h3>坚果 Pro 3 足迹保护套</h3>
					<p>这一次两面都有好故事</p>
					<span>手机壳低至两件49元</span>
					<b>
					</b>
					<em>&yen;39.00<del>49.00</del></em>
					<strong>查看详情</strong>
					<i class="showtips">满减</i>
					<aside>大促</aside>
				</li>
				<li>
					<a><img src="/img/sugimg4.jpg" /></a>
					<h3>坚果 Pro 3 足迹保护套</h3>
					<p>这一次两面都有好故事</p>
					<span>手机壳低至两件49元</span>
					<b>
					</b>
					<em>&yen;39.00<del>49.00</del></em>
					<strong>查看详情</strong>
					<i class="showtips">满减</i>
					<aside>大促</aside>
				</li>
			</ul>
			<!-- 第二行推荐 -->
			<ul>
				<li>
					<a><img src="/img/sugimg5.jpg" /></a>
					<h3>足迹保护套 人类首次公开使用乙醚</h3>
					<p>公益宝贝</p>
					<span>手机壳低至两件79元</span>
					<b>
					</b>
					<em>&yen;59.00<del>69.00</del></em>
					<strong>查看详情</strong>
					<i class="showtips">满减</i>
					<aside>大促</aside>
				</li>
				<li>
					<a><img src="/img/sugimg6.jpg" /></a>
					<h3>足迹保护套 英国自然科学杂志《自然》</h3>
					<p>公益宝贝</p>
					<span>手机壳低至两件79元</span>
					<b>
					</b>
					<em>&yen;59.00<del>69.00</del></em>
					<strong>查看详情</strong>
					<i class="showtips">满减</i>
					<aside>大促</aside>
				</li>
				<li>
					<a><img src="/img/sugimg7.jpg" /></a>
					<h3>畅呼吸电子温湿度计</h3>
					<p>冷暖干湿，一目了然</p>
					<span>双12大促</span>
					<b>
						<span></span>
					</b>
					<em>&yen;79.00<del>99.00</del></em>
					<strong>查看详情</strong>
					<i>满减</i>
					<aside class="showtips">直降</aside>
				</li>
				<li>
					<a><img src="/img/sugimg8.jpg" /></a>
					<h3>坚果快充移动电源 10000mAh</h3>
					<p>支持QC3.0/PD3.0协议</p>
					<span>自营配件 满300减40</span>
					<b>
						<span class="gray"></span>
					</b>
					<em>&yen;69.00<del>119.00</del></em>
					<strong>查看详情</strong>
					<i class="showtips">满减</i>
					<aside>大促</aside>
				</li>
			</ul>
		</div>
	</div>

	<!-- 总价格结算条 -->
	<!-- 滚动时添加class=scrollsum -->
	<div class="sum">
		
	</div>
	<script type="text/html" id="priceBarTemplate">
		<div class="container">
			<div>
				<span>您已选择了</span>
				<ul>
					<li>
						<i>{{name}}</i>
						<em>&yen; {{price}}</em>
					</li>
					<li>
						<input type="button" value=" - " />
						<input type="text" value="1" class="inputCount" />
						<input type="button" value=" + " />
					</li>
				</ul>
			</div>
			<div>
				<em>&yen;{{price}}</em>
				<span>现在购买</span>
				<span id="addToCart">加入购物车</span>
			</div>
		</div>
	</script>

	<!-- 底部备案信息 -->
	<!-- 滚动的时候加入样式class="scrollfoot"，到footer的时候掉该样式 -->
	<footer class="scrollfoot">
	</footer>

	<!-- 设置侧边回到顶部的样式 -->
	<div class="back">
		<ul>
			<li>
				<span class="iconfont icon-kefu"></span>
				<p>联系客服</p>
			</li>
			<li>
				<span class="iconfont icon-jiantoushang"></span>
				<p>回到顶部</p>
			</li>
		</ul>
	</div>

	<!-- <script src="/js/utils.js"></script>
		<script src="/js/jquery.min.js"></script>
		<script src="/js/details.js"></script> -->
	<script src="/lib/require/require.js" data-main="/js/details"></script>
</body>

</html>